<template>
  <div class="app">
    <van-nav-bar title="个人信息" left-arrow @click-left="onClickLeft" />
    <div class="head">
      <img src="../../assets/img/头像.png" alt="" />
      <img src="../../assets/img/相机.png" class="posi" alt="" />
    </div>
    <div class="list">
      <!-- 英文名 -->
      <div>
        <van-cell is-link @click="imgclick">
          <span>英文名</span>
          <span class="right">{{ enname }}</span>
        </van-cell>
      </div>
      <!-- 中文名 -->
      <div>
        <van-cell is-link>
          <span>中文名</span>
          <span class="right"></span>
        </van-cell>
        <van-popup v-model:show="show1">
          <input type="text" v-bind:value="chnname" v-on:input="chnnameInput" />
        </van-popup>
      </div>
      <!-- 生日 -->
      <div>
        <van-cell is-link @click="imgclick">
          <span>生日</span>
          <span class="right"> {{ date }}</span>
        </van-cell>
      </div>
      <!-- 性别 -->
      <div>
        <van-cell is-link @click="imgclick">
          <span>性别</span>
          <span class="right">{{ sex }}</span>
        </van-cell>
      </div>
    </div>
    <div class="btn">
      <van-button round size="large" type="primary" @click="gotomy"
        >保存</van-button
      >
    </div>
  </div>
</template>

<script>
// import { ref } from "vue";
import { NavBar } from "vant";
import { Popup } from "vant";
import { Cell } from "vant";
import { Button } from "vant";
import { useRouter } from "vue-router";
export default {
  components: {
    vanNavBar: NavBar,
    vanCell: Cell,
    vanPopup: Popup,
    vanButton: Button,
  },
  setup() {
    // 从本地存储里获取信息
    const enname = localStorage.getItem("name") || "";
    const sex = localStorage.getItem("sex") || "";
    const date = localStorage.getItem("date") || ""; //跳转
    const router = useRouter();
    const imgclick = () => {
      router.push("/message");
    };
    // 回退
    const onClickLeft = () => {
      router.go(-1);
      // console.log(router);
    };
    // gotomy
    const gotomy = () => {
      router.replace("/home/my");
    };
    return {
      imgclick,
      onClickLeft,
      enname,
      sex,
      date,
      gotomy,
    };
  },
};
</script>

<style lang="less" scoped>
.app {
  background: rgb(248, 246, 246);
  height: 667px;
  .right {
    float: right;
  }
  .head {
    width: 80px;
    height: 80px;
    margin: 50px auto 20px;
    position: relative;
    .posi {
      right: 1px;
      bottom: 6px;
      position: absolute;
    }
  }
  .list {
    width: 345px;
    height: 230px;
    margin: auto;
  }
  .btn {
    margin: 20px auto;
    width: 300px;
    height: 45px;
  }
}
</style>
